<template>
  <div class="">
    <div
      style="
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 10px 10px 20px 10px;
      "
    >
      <div style="width: 14%; padding: 10px 10px 20px 10px">
        <el-tree
          class="filter-tree"
          :data="databaseLaminations"
          :props="defaultProps"
          default-expand-all
          ref="tree"
          :expand-on-click-node="false"
          :highlight-current="true"
          :check-on-click-node="true"
          @node-click="handleNodeClick"
        />
      </div>

      <div style="width: 85%">
        <div class="search-container">
          <el-form :model="searchParam" :inline="true">
            <el-form-item label="对象名">
              <el-input
                v-model="searchParam.name"
                placeholder="请输入对象名"
                clearable
                @keyup.enter="search"
              />
            </el-form-item>
            <el-form-item label="业务说明">
              <el-input
                v-model="searchParam.businessDesc"
                placeholder="请输入业务说明"
                clearable
                @keyup.enter="search"
              />
            </el-form-item>
            <el-form-item label="对象描述">
              <el-input
                v-model="searchParam.remarks"
                placeholder="请输入对象描述"
                clearable
                @keyup.enter="search"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search">
                <i-ep-search />
                搜索
              </el-button>
              <el-button @click="reset">
                <i-ep-refresh />
                重置
              </el-button>
            </el-form-item>
          </el-form>
        </div>

        <el-card shadow="never" class="table-container">
          <el-button type="success" plain @click="openDialog()">
            <i-ep-plus />
            新增
          </el-button>
          <el-button
            type="danger"
            plain
            :disabled="ids.length === 0"
            @click="handleTableDelete()"
          >
            <i-ep-delete />
            删除
          </el-button>
          <el-table
            style="padding-top: 10px"
            ref="dataTableRef"
            v-loading="loading"
            :data="tableData"
            highlight-current-row
            border
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column
              label="分层信息"
              prop="databaseLamination"
              min-width="100"
            >
              <template #default="scope">
                {{
                  useDictionary(
                    "DatabaseLamination",
                    scope.row.databaseLamination
                  )
                }}
              </template>
            </el-table-column>
            <el-table-column
              label="对象名"
              prop="name"
              min-width="100"
              show-overflow-tooltip
            />
            <el-table-column
              label="对象描述"
              prop="remarks"
              min-width="100"
              show-overflow-tooltip
            />
            <el-table-column
              label="数据仓库"
              prop="warehouseName"
              min-width="100"
              show-overflow-tooltip
            />
            <el-table-column label="是否启用" prop="enabled" min-width="100">
              <template #default="scope">
                {{ useDictionary("Enabled", scope.row.enabled) }}
              </template>
            </el-table-column>
            <el-table-column
              label="业务说明"
              prop="businessDesc"
              min-width="100"
              show-overflow-tooltip
            />
            <el-table-column fixed="right" label="操作" width="240">
              <template #default="scope">
                <el-button
                  type="primary"
                  size="small"
                  link
                  @click="openDialogdetail(scope.row)"
                >
                  <i-ep-search />
                  查看
                </el-button>
                <el-button
                  type="primary"
                  size="small"
                  link
                  @click="openDialog(scope.row)"
                >
                  <i-ep-edit />
                  编辑
                </el-button>
                <el-button
                  type="primary"
                  size="small"
                  link
                  @click="handleTableDelete(scope.row.id)"
                >
                  <i-ep-delete />
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            :background="true"
            :current-page="pageable.pageNum"
            :page-size="pageable.pageSize"
            :page-sizes="[10, 25, 50, 100]"
            :total="pageable.total"
            layout="total, sizes, prev, pager, next, jumper"
            class="mt-[20px]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-card>
      </div>
    </div>
    <dmpmetadatadataobject-edit
      :visible="addDialog.visible"
      :title="addDialog.title"
      :data="addDialog.data"
      @reset-table="(id:string) => (id?.length ? getTableList() : reset())"
      :is-readonly="addDialog.readvisible"
      @change-visible="changeVisible"
    />
  </div>
</template>

<script setup lang="ts">
import { useTable, useDictionary } from "@/utils/useTable";
import request from "@/utils/request";

defineOptions({
  name: "DMPMETADATADATAOBJECT",
  inheritAttrs: false,
});

// 请求参数
const requestApi = "/dmpAdmin/dmpmetadatadataobject/queryByPage";

// 是否需要分页
const pagination = true;

const initParam = {};

// 初始化搜索参数数据
const searchParamInit = {
  name: "",
  businessDesc: "",
  remarks: "",
  warehouseId: "",
  databaseLamination: "",
};

const deleteParam = {
  api: "/dmpAdmin/dmpmetadatadataobject/delete",
  data: {},
};

// 数据请求错误后处理
function requestError() {}

const dataCallBack = ref(undefined); // 无需二次数据处理&不传赞数也行

// 表格操作 Hooks
const {
  tableData,
  pageable,
  searchParam,
  ids,
  getTableList,
  search,
  reset,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange,
  handleTableDelete,
  loading,
}: any = useTable(
  requestApi,
  initParam,
  searchParamInit,
  pagination,
  dataCallBack.value,
  requestError,
  deleteParam
);

onMounted(() => {
  getTableList();
  getwareHouseTree();
});

const addDialog = reactive<DialogOption>({
  visible: false,
  readvisible: false,
  title: "",
  data: {},
});

// 查询详情
async function getInfo(id: string) {
  request({
    url: `/dmpAdmin/dmpmetadatadataobject/get/${id}`,
    method: "get",
  })
    .then((data) => {
      addDialog.data = data.data;
      addDialog.visible = true;
      addDialog.data.enabled = addDialog.data.enabled.toString();
    })
    .catch((res) => {
      console.log(res);
    });
}

/** 打开数据仓库对象表单弹窗 */
function openDialog(roleObj?: Object) {
  if (roleObj) {
    addDialog.title = "修改数据仓库对象";
    getInfo(roleObj.id);
  } else {
    addDialog.title = "新增数据仓库对象";
    addDialog.visible = true;
  }
  addDialog.readvisible = false;
}

/** 打开数据仓库对象表单弹窗 详情 */
function openDialogdetail(roleObj?: any) {
  addDialog.title = "数据仓库对象详情";
  getInfo(roleObj.id);
  addDialog.readvisible = true;
}

function changeVisible(value: boolean) {
  addDialog.visible = value;
  if (!value) {
    addDialog.data = {};
  }
}

const defaultProps = reactive({
  children: "children",
  label: "label",
});

function handleNodeClick(data?: any) {
  searchParam.name = "asdasda";
  if (data.value) {
    searchParam.value.databaseLamination = data.value;
    searchParam.value.warehouseId = "";
  } else {
    searchParam.value.databaseLamination = "";
    searchParam.value.warehouseId = data.id;
  }
  search();
}

const databaseLaminations = ref([]);

function getwareHouseTree() {
  let databaseLaminationList = useDictionary("DatabaseLamination");
  request({
    url: `/dmpAdmin/dmpwarehouse/getlist`,
    method: "post",
    data: {},
  })
    .then((res) => {
      databaseLaminationList.forEach((item) => {
        let children = [];
        res.data.forEach((ware) => {
          if (item.value == ware.databaseLamination) {
            children.push({ label: ware.warehouseName, id: ware.id });
          }
        });
        item.children = children;
      });
      databaseLaminations.value = databaseLaminationList;
    })
    .catch((res) => {
      console.log(res);
    });
}
</script>
